import 'package:cook_dinner/config/include.dart';
import 'package:cook_dinner/pages/sort/sort_view/sort_view.dart';
import 'package:cook_dinner/widgets/custom_appbar.dart';
import 'package:flutter/material.dart';

class SortPage extends StatefulWidget {
  const SortPage({Key? key}) : super(key: key);

  @override
  State<SortPage> createState() => _SortPageState();
}

class _SortPageState extends State<SortPage> {
  List<String> tabList = [
    '人气榜单',
    '意面',
    '主菜',
    '烘培',
    '快手菜',
    '蛋类',
    '甜点',
    '鱼类',
    '亚洲风味'
  ];

  int indicate = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBarCustom(
        '菜谱分类',
        actions: [
          InkWell(
            child: Padding(
              padding: EdgeInsets.only(right: 20.rpx),
              child: Image.asset(
                'assets/images/search_black.png',
                width: 24.rpx,
                height: 24.rpx,
              ),
            ),
          ),
        ],
      ),
      body: SizedBox(
        width: HYSizeFit.screenWidth,
        height: HYSizeFit.screenHeight,
        child: Row(
          children: [
            Container(
              width: 86.rpx,
              height: double.infinity,
              color: const Color(0xfff7f7f7),
              child: ListView.builder(
                itemCount: tabList.length,
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      setState(() {
                        indicate = index;
                      });
                    },
                    child: Container(
                      width: double.infinity,
                      height: 56.rpx,
                      padding: EdgeInsets.only(top: 19.rpx, bottom: 19.rpx),
                      color:
                          indicate == index ? Colors.white : Colors.transparent,
                      child: Container(
                        width: double.infinity,
                        height: 14.rpx,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          border: Border(
                            right: BorderSide(
                              width: 2.rpx,
                              color: indicate == index
                                  ? const Color(0xffFA8303)
                                  : Colors.transparent,
                            ),
                          ),
                        ),
                        child: Text(
                          tabList[index],
                          style: TextStyle(
                            fontSize: 14.rpx,
                            color: indicate == index
                                ? const Color(0xffFA8303)
                                : const Color(0xff999999),
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            Expanded(
              child: Container(
                width: double.infinity,
                height: double.infinity,
                color: Colors.white,
                child: const SortView(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
